<script lang="tsx">
import { defineComponent, ref, type ExtractPropTypes } from 'vue'
import { ElButton, buttonProps, ElTooltip } from 'element-plus'
import { omitSelfProps } from './utils'
export const oButtonSelfProps = {
  perm: {
    type: String,
    default: 'true'
  },
  visiable: {
    type: Boolean,
    default: true
  },
  tip: {
    type: String
  }
  // type: {
  //   type: String,
  //   default: 'primary'
  // }
}
// export const oButtonSelfMap = Object.keys(oButtonSelfProps).reduce((obj, key) => {
//   obj[key] = oButtonSelfProps[key].default
//   return obj
// }, {})
export const oButtonProps = { ...buttonProps, ...oButtonSelfProps }
export declare type oButtonPropsType = ExtractPropTypes<typeof oButtonProps>
export default defineComponent({
  components: { ElButton },
  props: oButtonProps,
  setup(props: oButtonPropsType, context) {
    // console.log('props', props)
    const inProps = omitSelfProps<oButtonPropsType, typeof oButtonSelfProps>(
      props,
      oButtonSelfProps
    )
    inProps.size = inProps.size || 'small'
    const jsxButton = (
      <ElButton {...inProps}>{context.slots.default?.()}</ElButton>
    )

    return () =>
      !props.tip ? (
        jsxButton
      ) : (
        <ElTooltip content={props.tip}>{jsxButton}</ElTooltip>
      )
  }
})
</script>
<style lang="scss" scoped></style>
